<template>
  <div class="question-area">
    <span class="number" v-if="showNumber">{{ number }}</span>
    <span class="title"> {{ question.title }} </span>
    <span class="is-required" v-if="question.must"> * </span>
    <span style="margin-left: 5px" v-if="question.score">({{ question.score }}分)</span>
  </div>
  <div class="remark" v-if="question.remark">
    <span> {{ question.remark }} </span>
  </div>
  <div class="answer-area">
    <el-radio-group v-model="answer" @change="changeAnswer">
      <div v-for="(option, i) in question.options" :key="i" class="choice">
        <el-radio :label="option.title"></el-radio>
        <span class="left" v-if="option.limit">剩余{{ option.remain }}</span>
      </div>
    </el-radio-group>
  </div>
</template>

<script>
  export default {
    props: {
      question: Object,
      number: Number,
      changeAnswers: Function,
      saveAnswer: Function,
      showNumber: Boolean,
    },
    data() {
      return {
        answer: null,
      };
    },
    created() {
      if (this.question.answer) {
        for (var i = 0; i < this.question.options.length; i++) {
          if (this.question.options[i].id == this.question.answer[0].option_id) {
            this.answer = this.question.options[i].title;
          }
        }
      }
    },
    methods: {
      changeAnswer(name) {
        var options = this.question.options;
        var id = [];
        for (var i = 0; i < options.length; i++) {
          if (options[i].title == name) {
            id.push(options[i].id);
            break;
          }
        }
        this.changeAnswers(this.number, id);
        if (this.saveAnswer) {
          console.log('single')
          this.saveAnswer();
        }
      },
    },
  };
</script>

<style scoped>
.question-area {
  margin-bottom: 20px;
}

.question-area span {
  margin-right: 5px;
}

.number {
  font-weight: bolder;
  font-size: 18px;
}

.title {
  font-size: 18px;
}

.is-required {
  background-size: 100%;
  vertical-align: -2px;
  font-size: 18px;
  color: red;
}

.answer-area {
  font-size: 14px;
}
.remark {
  /* margin-bottom: 20px; */
  font-size: 14px;
  color: rgba(0, 0, 0, 0.6);
}
/* .el-radio {
  width: 100%;
  margin-top: 20px;
} */
.choice {
  margin-top: 20px;
}

.left {
  font-size: 12px;
}
</style>